<template>
  <div class="box">
    <div class="header">
      <Header></Header>
    </div>
    <div class="content">
      <div class="main">
     
        <div
          id="miniprogramWrap"
          class="main_item js_mainItem"
          style="overflow: visible; display: block"
        >
          <div class="nav">
            <span
              data-to="mainWrap"
              class="nav_pic f_icon arrowL js_toMainItem"
            ></span
            ><span class="nav_title">微信登录</span>
          </div>
          <div class="miniprogram_code_login_block">
            <div
              id="miniprogramQRcodeWrap"
              style="display: block"
              class="qrcode_wrap"
            >
              <div class="qrcode_img_block">
                <div class="qrcode_img">
                  <img
                    id="miniprogramImportImg"
                    :src="qrcode"
                    style="display: block"
                  />
                </div>
                <!-- <div class="qrcode_expired_img">
                  <img
                    src="//ac.wpscdn.cn/account/libs/img/v1/miniprogramcode/qrcode-default.5429c241.png"
                  /><span class="miniprogram_center_img"></span>
                </div> -->
              </div>
              <div id="qrcodeDesc" class="desc_item">请使用微信扫码</div>
            </div>
            <div
              id="miniprogramInfoWrap"
              style="display: none"
              class="info_wrap"
            >
              <div class="qrcode_img_block">
                <img
                  src="//ac.wpscdn.cn/account/libs/img/v1/miniprogramcode/icon-phone-confirm.4e5a5ac8.svg"
                  class="icon_circle_block"
                />
              </div>
              <div class="desc_item">
                <p class="desc_item_top">扫码完成，请在手机上操作</p>
                <p class="desc_back">重新扫码，请<a id="back">返回</a></p>
              </div>
            </div>
          </div>
          <!-- <div class="sync_login_b">
            没有帐号？<a
              href="/v1/signup"
              target="_blank"
              data-hash="miniprogram"
              class="js_createLink createLink"
              >立即注册</a
            ><i class="f_icon icon_blue_arrowR"></i>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
export default {
  components: {
    Header,
  },
  data(){
    return{
      qrcode:'',
      ticket:'',
      setInter: '',
      token:''
    }
  },
  created(){
    this.getQrcode()
  },
  destroyed(){
    this.endSetInter()
  },
  methods:{
    getQrcode(){
      let params={
        path:'pages/mine/mine',
        param:''
      }
      this.$axios.get('getQrCode',{params}).then(res=>{
        console.log('res',res);
        this.qrcode=res.data.qrcode
        this.ticket=res.data.ticket
        this.getQrCodeToken()
      }).catch(err=>{
        console.log('err',err);
      })
    },
    getQrCodeToken(){
      let params={
        ticket:this.ticket
      }
       this.$axios.post('getQrCodeToken',params).then(res=>{
         console.log('res轮询',res);
         this.setInter = setInterval(() => {
							this.getQrCodeToken()
							this.endSetInter()
						}, 1200)
        if (res.data) {
           console.log('res登录成功',res);
              this.$message.success(res.msg)
							console.log('token',res.data.token)
							this.token=res.data.token
							this.putQrCodeToken()
							localStorage.setItem("token", res.data.token);
							localStorage.setItem("SESSION", res.data.token);
							this.endSetInter()
							this.getUserinfo()
              
						}
      }).catch(err=>{
        console.log('err',err);
      })
    },
    putQrCodeToken(){
      this.endSetInter()
      let params={
        token:this.token,
        ticket:this.ticket

      }
      this.$axios.post('putQrCodeToken',params).then(()=>{
        this.endSetInter()
        
      }).catch(err=>{
        console.log('err',err);
      })
    },
     getUserinfo() {
					this.$axios.get('getUserinfo',{headers:{"Authorization": "Bearer" + this.token}}).then((res) => {
						if (res.code === 1) {
							this.userinfo = res.data;
              sessionStorage.setItem('userinfo',JSON.stringify(res.data));
						this.$router.replace({name:'Home'})
            location.reload();
						
						} else {
              this.$message.error(res.msg)
							
						}
					})
					.catch((e) => {
						console.log(e);
					});
			},
			
    // 清除定时器
			endSetInter() {
				clearInterval(this.setInter)
			},

  }
};
</script>

<style lang="less" scoped>
.main {
    overflow: hidden;
    width: 358px;
    margin: 90px auto 0;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    position: relative;
}
.nav_title {
    font-size: 24px;
    line-height: 24px;
    color: #535252;
    font-weight: 600;
}
.main_item {
    position: relative;
    display: none;
    overflow: hidden;
    vertical-align: top;
    width: 260px;
    min-height: 408px;
    _height: 408px;
    margin: 0 auto;
}
.nav{
  text-align: center;
  padding-top: 37px;
}

.miniprogram_code_login_block {
    padding-top: 35px;
}
.sync_login_b {
    position: absolute;
    width: 100%;
    bottom: 36px;
    color: #9B9B9B;
}
#miniprogramQRcodeWrap .qrcode_img_block {
    width: 180px;
    height: 180px;
    margin: 0 auto;
}
#miniprogramQRcodeWrap .desc_item {
    margin-top: 18px;
    font-size: 16px;
}
.arrowL {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    width: 12px;
    height: 18px;
    background-position: 0 -290px;
    cursor: pointer;
}
.qrcode_img img{
    width: 100%;
    /* height: 100%; */
}
</style>

